<template>
  <!-- 真空炉 -->
  <div style="position: relative">
    <div
      id="equipmentAdminBox"
      :key="brder1Key"
      v-init-screen-h="0"
      class="equipmentAdmin_box"
    >
      <div class="content">
        <div class="content_top flex-x flex-top" style="height: 75%">
          <div style="width: 60%; height: 100%" class="">
            <dv-border-box-12
              style="padding:  10px; height: 100%"
              class="msg_content"
            >
              <div class="flex-x flex-wrap h-full">
                <!-- 算出每一行的高度 -->
                <div
                  class="flex-x flex-wrap"
                  :style="{
                    width: '33%',
                    height: `${100 / Math.ceil(renderJsonDownArea.length / 3)}%`
                  }"
                  v-for="(item, index) in renderJsonDownArea"
                  :key="index"
                >
                  <ContentField
                    :imgUrl="item.imgUrl"
                    :title="item.ch_Text"
                    :content="item.areaName"
                  ></ContentField>
                </div>
              </div>
            </dv-border-box-12>
          </div>

          <!-- 实时曲线图 -->
          <RealTimeChart ref="realChart" style="height: 100%; width: 40%" />
        </div>
        <!-- 任务号,远程监控 -->
        <div
          class="content_bottom flex-x flex-top"
          style="height: 25%; width: 100%"
        >
          <!-- 任务号 -->
          <SinteringTaskNumber style="width: 60%; height: 100%" />
          <!-- 远程监控 -->
          <RemoteMonitoring
            manufacture-site="真空热处理"
            style="width: 40%; height: 100%"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import _ from "lodash";
import { generateId } from "@/utils";
import RealTimeChart from "./components/RealTimeChart.vue";

import SinteringTaskNumber from "../components/SinteringTaskNumber.vue";
import RemoteMonitoring from "./components/RemoteMonitoring.vue";

import ContentField from "../components/ContentField.vue";
import { renderJson } from "../constant";

import { mapGetters } from "vuex";
export default {
  components: {
    ContentField,
    RemoteMonitoring,
    RealTimeChart,
    SinteringTaskNumber
  },
  data() {
    return {
      monitorDrawerShow: false,
      drawerShow: false,
      brder1Key: generateId()
    };
  },
  watch: {
    // 有bug 晚点改
    "$store.state.app.sidebar.opened"() {
      setTimeout(() => {
        this.brder1Key = generateId();
      }, 300);
    }
  },
  computed: {
    ...mapGetters(["area123", "controlDeviceInfo"]),

    // 获取下一部分
    renderJsonDownArea() {
      if (JSON.stringify(this.controlDeviceInfo) !== "{}") {
        return renderJson(this.area123, this.controlDeviceInfo._msgContentList)
          ?.downArea;
      } else {
        return [];
      }
      // console.log('this.controlDeviceInfo :>> ', this.controlDeviceInfo);
      // return renderJson(this.area123, this.controlDeviceInfo._msgContentList).downArea;
    }
  },
  async mounted() {},
  destroyed() {},
  methods: {}
};
</script>

<style lang="scss" scoped>
.equipmentAdmin_box {
  // background: url(../../../assets/images/applicationCenter/app_bg.jpg) no-repeat
  //   100%;
  background-size: cover;
  color: #fff;
  position: relative;
  width: 100%;
  height: 100%;

  .left {
    width: 16%;
    height: 100%;
  }

  .content {
    height: 100%;
  }

  // .content_bottom {
  // }
}
</style>
